<!doctype html>
<html>
<head>
	<title>Line Chart</title>
	<meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
	<link rel="stylesheet" href="resources\we-vue\style.css">
    <link rel="stylesheet" href="resources\css\font-awesome.min.css">
</head>
<body>
	<center id="word" >监测数据共{{DataNum}}个</center>
	<canvas id="app" height="300" width="850" ></canvas>
</body>

<script src="resources\js\Chart.js"></script>
<script src="resources\js\vue.min.js"></script>
<script src="resources\js\jquery.min.js"></script>
<script src="resources\we-vue\index.js"></script>
<script src="resources\layer_mobile\layer.js"></script>
<script src="resources\js\my.js"></script>

<script>
    new Vue({
    el: '#app',
    data: {
        deps: [],
		dataOver: '',
    },
    methods: {
    	drawline() {
			Serv.loadData({url: '/cnt2.jsp'}, (dataOver) => {
			    this.dataOver = dataOver;
			});

            Serv.loadData({url:'/showline.jsp'}, (data) => {
                this.data = data;

				var datas = [];
				var data2 = [];
				var labels = [];

				var Num = this.dataOver;

				this.data.forEach(function(e) {
					data2.push(Num);
					datas.push(e.ds_data);
					labels.push(e.ds_time);
				});

				var lineChartData = {
				labels : labels,
				datasets : [{
						fillColor : "rgba(151,187,205,0.5)",
						strokeColor : "rgba(151,187,205,1)",
						pointColor : "rgba(151,187,205,1)",
						pointStrokeColor : "#fff",
						data : datas
						},
						{
						fillColor : "rgba(0,0,0,0)",
						strokeColor : "rgba(255,0,0,1)",
						pointColor : "rgba(255,0,0,1)",
						pointStrokeColor : "#fff",
						data : data2
					}]
				}
				var myLine = new Chart(document.getElementById("app").getContext("2d")).Line(lineChartData);
				});	
			},	
    	},
   		mounted() {
			this.drawline();
		},
	}); 
	new Vue({
    	el: '#word',
    	data: {
			DataNum: '',
    	},
    	methods: {
    		drawWord() {
				Serv.loadText({url: '/cnt.jsp'}, (DataNum) => {
				    this.DataNum = DataNum;
				});
			},  
    	},
    	mounted() {
			this.drawWord();
		},
	}); 
    
</script>

</html>
